<template>
    <div  id="print" class="print">
        <h1 class="mt20 text-center " style="font-size: 2rem;" >工程项目施工管理人员名单</h1>
        <el-descriptions :column="3"  border >
            <el-descriptions-item :span="2">
                <template #label>
                    <div class="cell-item" ><el-text>工程名称</el-text></div>
                </template>
                <div ><el-text>{{project.title}}</el-text></div>
            </el-descriptions-item>
            <el-descriptions-item :span="2">
                <template #label>
                    <div class="cell-item" ><el-text>施工单位</el-text></div>
                </template>
                <div style="width: 215px;"><el-text>{{project.build_unit}}</el-text></div>
            </el-descriptions-item>
        </el-descriptions>

        <el-table border :data="tableData" v-loading="form.loading" style="width: 100%;font-size: 16px;margin-top: 0px;">
            <el-table-column type="index" align="center" :index="indexMethod" />
            <el-table-column width="80">
                <template #default="scope">
                    <div class="cell-item" ><el-text>{{ scope.row.role.name }}</el-text></div>
                </template>
            </el-table-column>
            <el-table-column width="100">
                <template #default="scope">
                    <div class="cell-item"><el-text>{{ scope.row.user.name }}</el-text></div>
                </template>
            </el-table-column>
            <el-table-column width="80">
                <template #default>
                    <div class="cell-item"><el-text>执业证号</el-text></div>
                </template>
            </el-table-column>
            <el-table-column >
                <template #default="scope">
                    <div class="cell-item"><el-text>{{ scope.row.cert ? scope.row.cert.numbers : '/' }}</el-text></div>
                </template>
            </el-table-column>
            <el-table-column width="80">
                <template #default>
                    <div class="cell-item"><el-text>联系电话</el-text></div>
                </template>
            </el-table-column>
            <el-table-column width="80">
                <template #default="scope">
                    <div class="cell-item"><el-text>{{ scope.row.user.mobile }}</el-text></div>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="text-center mt30"><el-button @click="printElement('print')"> 打印 </el-button></div>
</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import { PrinterService } from '../util/printer'
const printer = new PrinterService()
import http from '../util/request';
const indexMethod = (index: number) => {
  return index+= 1
}

const form = ref<any>({search:'',type:1,page:0,current:0,total:10,limit:20,loading:false,parentBorder:false})
// const isUser = ref<boolean>(false)
const tableData = ref<any[]>([])
const project = ref<any>({title:'',build_unit:''})

const onGetData = () => {
    
    form.value.loading = true
    http.post('/role/user',form.value).then((response:any)=>{
        form.value.loading = false
        tableData.value = response.data.data
        project.value = response.data.project
    })
}

const printElement = (elementId:string) => {
    printer.printElement(elementId, { title: '' })
}

onMounted(()=>{
    onGetData()
})

</script>

<style scoped>
.form{margin:0px auto;height: calc(100vh - 25vh);overflow-y: scroll;}
.print{width: 210mm;size: A4;margin: 1cm;}
.w-f{width: 200px;}
.b_ .el-input{width: 180px;}
.cell-item{width: 100px;}
.el-text{font-size: .7rem !important;}
</style>